import React from 'react';
import { observer } from 'mobx-react';
import Search from '../../../view/view-input/Search';

interface Props {
    editable?: boolean;
    value?: string;
    onChange: (string) => void;
    showDialog: () => void;
    column?;
    row?;
}

export default observer((props: Props) => {
    
    const { column, row,value } = props;
    let hide=column&&column.isHide&&column.isHide(row);
    const valueSpan = row.value[column.key+'Span']&&row.$(column.key+'Span').value;
    const valueDesc=column.valueDesc&&column.valueDesc(value,row);
    let otherProps={};
    if(column.key=='showmethod'){
        otherProps['value']='';
    }
    return (
        <div style={hide?{display:"none"}:{display:"block"}}>
        {props.editable ?
            <Search
                enterButton
                {...props}
                onChange={(e) => { props.onChange(e.target.value) }}
                onSearch={props.showDialog}
                {...otherProps}
            /> :
            <span>{valueDesc||valueSpan||value}</span>}
        </div>
    )

});